import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import { cn } from '@/lib/utils'
import { Button } from '@/components/ui/button'
import { useAuth } from '@/context/AuthContext'

const menuItems = [
  { name: '控制台', path: '/dashboard' },
  { name: '用户管理', path: '/user' },
  { name: '菜单管理', path: '/menu' },
]

export const Sidebar: React.FC = () => {
  const location = useLocation()
  const { logout } = useAuth()

  return (
    <div className="w-64 h-full bg-gray-100 border-r">
      <div className="p-4">
        <h1 className="text-xl font-bold">管理系统</h1>
      </div>
      <nav className="space-y-1">
        {menuItems.map((item) => (
          <Link
            key={item.path}
            to={item.path}
            className={cn(
              'flex items-center px-4 py-2 text-sm font-medium',
              location.pathname.startsWith(item.path)
                ? 'bg-gray-200 text-gray-900'
                : 'text-gray-600 hover:bg-gray-200'
            )}
          >
            {item.name}
          </Link>
        ))}
      </nav>
      <div>
        <Button onClick={logout}>退出</Button>
      </div>
    </div>
  )
} 